<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jsAMP MP3 Player v0.99a.20071010 - Technology Preview Demo</title>
<meta name="author" content="Scott Schiller" />
<meta name="language" content="en-us" />
<meta name="keywords" content="javascript sound library api" />
<meta name="description" content="Demo page for soundmanager mp3 player" />
<link rel="stylesheet" type="text/css" href="css/player.css" title="dark" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/player-light.css" title="light" media="screen" />
<style type="text/css">

#demo-info {
 position:relative;
 padding:1em;
 background:#000;
 opacity:0.75;
 filter:alpha(opacity=75);
 color:#fff;
 max-width:51em;
}

#demo-info h1 {
 margin:0px 0px 2em 0px;
 font-size:1.5em;
 color:#99ccff;
}

#demo-info p {
 line-height:1.5em;
}

#demo-info a {
 color:#99ccff;
}

#demo-info a:hover {
 color:#fff;
}

#close {
 position:absolute;
 right:0px;
 top:0px;
 display:block;
 width:1em;
 line-height:1em;
 padding:0.1em;
 margin:0.5em;
 height:1em;
 text-decoration:none;
 color:#fff;
 border:1px solid #666;
 text-align:center;
 overflow:hidden;
}

#close:hover {
 background:#333;
}

#demo-info.closed * {
 display:none;
}

#demo-info.closed .minimal {
 display:block;
 margin:0px;
 padding:0px;
}

#demo-info.closed .minimal * {
 display:inline;
}

</style>
<script type="text/javascript">
function setActiveStyleSheet(title) {
  var i, a, main;
  for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
</script>
<script type="text/javascript" src="../../script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="script/jsamp-preview.js"></script>

</head>

<body>

<div>

 <!-- skin / control stuff -->
 <div id="demo-info">

  <h1>jsAMP: Example SoundManager 2 Application</h1>
<pre style="font-size:1.25em">
 ---------------------------------------------------------

  * GENERAL DISCLAIMER: jsAMP is UNSUPPORTED DEMO CODE. *

  jsAMP is provided "as-is" and as an example application
  using the API functionality provided by SoundManager 2.
  (It's also a dev. sanity QA check / API test suite.)

  I don't recommend throwing it on your band/label's site
  expecting it to "just work" - you have been warned. ;)

  You are welcome to use this in your own projects, but
  be aware jsAMP may be buggy, use at your own risk etc.
  
  If you are looking for a JS/DHTML/Flash MP3 player,
  check the related projects section of the SM2 project
  page for other resources.

 ---------------------------------------------------------
</pre>
  <p>jsAMP is a JavaScript MP3 player which uses the <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 project home">SoundManager 2 API</a> to provide JS-driven audio. It's an example of the kind of stuff you could build using SoundManager. All player logic is handled via Javascript, but SoundManager 2 (JS + Flash) provide the actual sound layer. It's also convenient in that no Flash knowledge is needed, it's all handled by SM2.</p>
  <p>jsAMP picks up all &lt;a&gt; elements linking to MP3 files in the page, and creates a playlist (view source for details.) It gets ID3 information when loading local/same-domain files or as permissions allow, as well.</p>
  <p>To see the playlist, click the "down arrow" <img src="image/sec-right-arr0.png" alt="Playlist toggle" title="Playlist toggle" /> at right on the UI.</p>
  <p>Click and drag the title bar to move the player around. When a track is loaded, click to seek or drag and drop the slider to a given position. (Safari seems to have a few minor UI issues in this version, FYI.) IE 6 also receives a somewhat-degraded, GIF-based experience.</p>

  <p><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2 Project Home</a></p>

  <p class="minimal">Skin: <a href="#" onclick="setActiveStyleSheet('light');return false">light</a> | <a href="#" onclick="setActiveStyleSheet('dark');return false">dark</a> || <a href="#" onclick="bg.getRandom();return false">this background sucks</a></p>

  <a id="close" href="#" title="close" onclick="document.getElementById('demo-info').className='closed';return false">-</a>

 </div>


 <div id="player-template" class="sm2player">

  <!-- player UI (bar) -->

  <div class="ui">

   <div class="left">
    <a href="#" title="Pause/Play" onclick="soundPlayer.togglePause();return false" class="trigger pauseplay"><span></span></a>
   </div>

   <div class="mid">

    <div class="progress"></div>
    <div class="info"><span class="caption text">%{artist} - %{title} [%{album}], (%{year}) (%{time})</span></div>
    <div class="default">jsAMP Technology Preview v0.99a.20071010 (Seriously alpha - use at own risk! :))</div>
    <div class="seek">Seek to %{time1} of %{time2} (%{percent}%)</div>
    <div class="divider">&nbsp;&nbsp;---&nbsp;&nbsp;</div>
    <a href="#" title="" class="slider"></a>
   </div>

   <div class="right">
    <div class="divider"></div>
    <div class="time" title="Time">0:00</div>
    <a href="#" title="Previous" class="trigger prev" onclick="soundPlayer.oPlaylist.playPreviousItem();return false"><span></span></a>
    <a href="#" title="Next" class="trigger next" onclick="soundPlayer.oPlaylist.playNextItem();return false"><span></span></a>
    <a href="#" title="Shuffle" class="trigger s1 shuffle" onclick="soundPlayer.toggleShuffle();return false"><span></span></a>
    <a href="#" title="Repeat" class="trigger s2 loop" onclick="soundPlayer.toggleRepeat();return false"><span></span></a>
    <a href="#" title="Mute" class="trigger s3 mute" onclick="soundPlayer.toggleMute();return false"><span></span></a>
    <a href="#" title="Volume" onmousedown="soundPlayer.volumeDown(event);return false" onclick="return false" class="trigger s4 volume"><span></span></a>
    <a href="#" title="Playlist" class="trigger dropdown" onclick="soundPlayer.togglePlaylist();return false"><span></span></a>
   </div>

  </div>

  <div class="sm2playlist-box">

  <!-- playlist / controls -->
  <div id="playlist-template" class="sm2playlist">

   <div class="hd"><div class="c"></div></div>
   <div class="bd">
    <ul>
     <!-- playlist items created, inserted here
      <li><a href="/path/to/some.mp3"><span>Artist - Song Name, etc.</span></a></li>
     -->
    </ul>
   </div>
   <div class="ft"><div class="c"></div></div>
  </div>

  <!-- close container -->
  </div>

 </div>

 <div style="position:absolute;left:0px;top:-9999px;width:30em">

 <p>This is a normal list of HTML links to MP3 files, which jsAMP picks up and turns into a playlist.</p>

 <ul>

  <li><a href="audio/going_outside.mp3">Going Outside</a></li>
  <li><a href="audio/office_lobby.mp3">Office Lobby Entrance</a></li>
  <li><a href="audio/rain.mp3">Rain</a></li>
  <li><a href="audio/walking.mp3">Walking</a></li>

  <!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->

  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Rain 3.mp3">Rain 3</a></li>
  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Frogs @ Yahoo!.mp3">Frogs @ Yahoo!</a></li>
  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Walking past sprinklers, mailbox.mp3">Walking past sprinklers, mailbox</a></li>
  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Cup of Coffee.mp3">Cup of Coffee</a></li>
  <li><a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl (featureblend.com)</a></li>
  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></li>
  <li><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></li>
  <li><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></li>

 </ul>

 </div>

</div>

<script type="text/javascript">
var bg = {
  images: ['bg1','bg2','bg3'],
  i: 0,
  getRandom: function(n) {
    this.i = (typeof n != 'undefined'?n:(++this.i>=this.images.length?0:this.i));
    document.body.style.background = "#000 url(backgrounds/"+this.images[this.i]+".jpg) no-repeat 0px 0px";
  }
}

bg.getRandom(parseInt(Math.random()*bg.images.length));
</script>

<script type="text/javascript">
if (window.location.toString().match(/flash9/)) soundManager.flashVersion = 9;
soundManager.url = '../../swf/';
</script>

</body>
</html>
